<template>
    <div class="user-menu-box flex-center-row-end">
      <div>{{user.name}}</div>
      <el-avatar class="user-menu-head-img"
                 shape="square"
                 size="medium"
                 :src="user.image"
                 icon="el-icon-user-solid"
                 @error="errorHandler" ref="userImage"
                 @mouseenter="showUserInfoMenu=true"
                 @mouseleave="showUserInfoMenu=false"
      ></el-avatar>
      <div class="user-menu-info" v-show="showUserInfoMenu">

      </div>
    </div>
</template>

<script>
    export default {
        name: "UserMenu",
        data(){
          return{
            showUserInfoMenu:true,
            user:{
              name:"游李滨",
              image:"https://img0.baidu.com/it/u=3462147961,1132096095&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            }
          }
        },
        methods:{
          errorHandler(){
            this.user.image="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            return true
          }
        }
    }
</script>

<style scoped lang="less">
  .user-menu-box{
    width:90%;
    height: 90%;
      div{
        margin-right: 5px;
      }
      .user-menu-head-img{
        cursor: pointer;
        transition: all 0.5s;
      }
      .user-menu-head-img:hover{
        outline: 2px solid teal;
      }
      .user-menu-info{
        position: absolute;
        width: 100px;
        border-radius: 10px;

      }

  }
</style>
